<template>
  <div class="hai_layout">
    <div class="hai_aside">
      <ul v-for="item in menu" :key="item.name" @click="handleClick(item, $event)">
        <li class="menu-item">{{ item.meta?.title }}</li>
      </ul>
      <div class="footer">
        <div class="user_info">
          <img :title="globalStore.userData?.name || '用户'" class="avter" src="@/assets/vue.svg" alt="">
        </div>
        <div class="logout" @click="logout">退出登录</div>
      </div>
    </div>
    <div class="hai_content">
      <RouterView></RouterView>
    </div>
  </div>
</template>

<script lang="ts" setup>
import { RouterView, useRouter, Router } from "vue-router";
import { useGlobalStore } from "@/store";
const router: Router = useRouter();
const globalStore = useGlobalStore()

const menu = router.getRoutes().filter((item) => item.meta?.type === "menu"); // 过滤出菜单路由

/**
 * 点击菜单
 * @param item 菜单项信息
 * @param e  点击事件对象
 */
const handleClick = (item: any,_e: MouseEvent) => {
  // console.log("click", item, e);
  router.push(item.path);
};

/**
 * 退出登录
 */
const logout = () => {
  document.cookie = "token=; expires=Thu, 01 Jan 1970 00:00:00 UTC; path=/;"; // 清除cookie
  globalStore.reset(); // 重置状态
  router.replace("/login"); // 重定向到登录页
};

onMounted(() => {
  console.log('Layout mounted', history.length);
});

</script>

<style lang="css" scoped>
.hai_layout {
  display: flex;
}
.hai_aside {
  width: 220px;
  height: 100vh;
  padding: 16px 12px;
  background-color: #25b68d;
}

li,
ul {
  list-style: none;
  padding-inline: 0;
}

.menu-item:hover {
  background-color: #94eed2;
  cursor: pointer;
}

.footer {
  width: inherit;
  position: absolute;
  bottom: 20px;
  text-align: center;
  display: flex;
  flex-direction: column;
  justify-content: center;
}
.logout:hover {
  cursor: pointer;
}

/* .user_info {
  display: flex;
  align-items: center;
} */
.avter {
  width: 80px;
  height: 80px;
  border-radius: 50%;
  margin-bottom: 12px;
  border: 2px solid #fff;
}
</style>
